<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, intial-scale=1,maximum-scale=1,user-scalable=no"  />
		<title>辅助类和响应式工具</title>
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<style>
			.a{
				height: 50px;
				width: 100px;
				border:1px solid #ccc;
				background: #eee;
			}
		</style>
	</head>
	<body style="margin: 50px;">
		<h3>情景文本颜色</h3>
		<p class="text-muted">Bootstrap视频教程(柔和灰)</p>
		<p class="text-primary">Bootstrap视频教程(主要蓝)</p>
		<p class="text-success">Bootstrap视频教程(成功绿)</p>
		<p class="text-info">Bootstrap视频教程(信息蓝)</p>
		<p class="text-warning">Bootstrap视频教程(警告黄)</p>
		<p class="text-danger">Bootstrap视频教程(危险红)</p>
		
		<h3>情景背景颜色</h3>
		<p class="bg-primary">Bootstrap视频教程(主要蓝)</p>
		<p class="bg-success">Bootstrap视频教程(成功绿)</p>
		<p class="bg-info">Bootstrap视频教程(信息蓝)</p>
		<p class="bg-warning">Bootstrap视频教程(警告黄)</p>
		<p class="bg-danger">Bootstrap视频教程(危险红)</p>
		
		<!--<button class="close">&times;</button>
		<span class="caret"></span>-->
		
		<!--<div class="pull-left a">左边</div>
		<div class="pull-right a">右边</div>
		<div class="center-block a">居中</div>-->
		
		<div class="pull-left a">左边</div>
		<div class="clearfix"></div>
		<div class="a">右边</div>
		
		<div class="visible-xs-inline a">超小屏激活显示</div>
		<div class="hidden-xs a">超小屏激活隐藏</div>
		
		<script src="jquery.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
	</body>
	
</html>
